#app {
  background: $bg-default;

  .app-content {
    display: flex;
    padding-top: 20px;

    .app-left {
      flex: 2.3;
      margin-right: 15px;
    }

    .app-right {
      flex: 1;
    }
  }

  // filter: invert(100%) hue-rotate(180deg);

  // img,
  // video {
  //     filter: invert(100%) hue-rotate(180deg);
  // }

  ::selection {
    background: $bg-selection;
    color: #666;
  }

  main {
    max-width: 1200px;
    margin: auto;
  }
}

@media (max-width: 767px) {
  #app {
    .app-content {
      flex-flow: column;

      .app-left {
        order: 2;
        margin-right: 10px;
        margin-left: 10px;
      }

      .app-right {
        order: 1;
        margin-right: 10px;
        margin-left: 10px;
      }
    }
  }

  .app-none {
    display: none;
  }


}

.ht-active-router {
  color: $bg-theme;
}

.ht-none-router {
  color: #000000a6;
}

.ht-font-tip {
  color: $bg-tip;
}
